<template>
	<view class="page">
		<view class="header">
			<view class="header-img">
				<tn-circle-progress :percent="datas.ratio" :width="230" :borderWidth="30" showPercent style="color: #FC2A2A;"
					activeColor="#FF520E"></tn-circle-progress>
			</view>
			<view class="header-name center">我当前的转化率</view>
			<view class="header-total flex">
				<view class="header-item">
					<view class="header-num">{{ datas.experience_count }}</view>
					<view class="header-title">体验单</view>
				</view>
				<view class="header-item">
					<view class="header-num">{{ datas.buy_count }}</view>
					<view class="header-title">购买单</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main-title center">转化率规则</view>
			<rich-text :nodes="content"></rich-text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				datas:{},
				content: ''
			};
		},
		onLoad() {
			this.initData();
			this.conversion()
		},
		methods: {
			initData(){
				let sendData = {};
				this.apifun.unirequest('/partner/user/getConversionRatio','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			conversion(){
				let sendData = {
					key:'转化率规则'
				};
				this.apifun.unirequest('/partner/index/getAgreement','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.content = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-image: url('@/static/img/bg1.png');
		background-size: cover;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.header {
		width: 690rpx;
		height: 464rpx;
		background-image: url('@/static/img/transformBg.png');
		background-size: cover;

		.header-img {
			margin-left: 235rpx;
		}

		.header-name {
			font-size: 24rpx;
			font-weight: bold;
		}

		.header-total {
			padding-top: 54rpx;
			justify-content: space-evenly;

			.header-item {
				text-align: center;

				.header-num {
					font-size: 40rpx;
					font-weight: bold;
				}

				.header-title {
					margin-top: 24rpx;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
	}

	.main {
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		margin-top: 20rpx;
		background: #FFFFFF;

		.main-title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 40rpx;
		}
	}
</style>